<template>
  <el-dialog
    top="10vh"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    title="更换头像"
    class="tag-edit-dialog personal-info-dialog"
    append-to-body
    width="40%"
    v-dialogMove
  >
    <div class="avatar-exchange">
      <div class="new-avatar">
        <img v-if="oldAvatar" :src="$img(oldAvatar)" />
        <img v-else src="@/assets/img/avatar.png" alt="avatar" />
      </div>
      <tag-upload
        ref="imgUpload"
        listType="picture-card"
        :fileList="upload.imgList"
        @uploadFun="imgFun"
        @removeFun="imgRemove"
        :fileLimit="imgFileLimit"
      >
        <template #button>
          <i class="el-icon-plus"></i>
        </template>
        <template #tip>
          图片只能上传jpg/png文件,建议上传分辨率100X100的图片
        </template>
      </tag-upload>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="beforeClose()">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      oldAvatar: '',
      avatarFileId: '',
      upload: {
        imgList: [],
        fileList: []
      },
      imgFileLimit: {
        type: 'image/jpeg,image/png',
        typeMsg: '只能上传jpg或png格式的图片'
      }
    }
  },
  methods: {
    showDialog(avatar) {
      this.oldAvatar = avatar
      this.dialogVisible = true
    },
    imgFun(params) {
      this.avatarFileId = params.fileId
      this.upload.imgList = params.fileList.slice(-1)
    },
    imgRemove() {
      this.avatarFileId = -1
    },
    beforeClose() {
      var close = true
      var msg = ''
      if (this.avatarFileId && this.avatarFileId !== -1) {
        close = false
        msg = '仍有未保存的文件，确定要关闭吗？'
      } else if (this.$refs.imgUpload.getProgress()) {
        close = false
        msg = '有未上传完成的文件，确定要关闭吗？'
      }
      if (close) {
        this.dialogVisible = false
      } else {
        this.$confirm(msg)
          .then(() => {
            this.clearDialog()
          })
          .catch(() => {})
      }
    },
    confirm() {
      this.$confirm('确定修改为该头像？', '提示').then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$ajax({
          url: this.$ajax.setUrl('auth/authUser/info'),
          method: 'put',
          data: this.$ajax.setData({
            avatarFileId: this.avatarFileId
          })
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$message.success(data.data || data.msg)
            this.clearDialog()
            this.$emit('refresh')
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    },
    clearDialog() {
      this.avatarFileId = ''
      this.upload = {
        imgList: [],
        fileList: []
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss">
.avatar-exchange {
  text-align: center;
  .new-avatar {
    display: inline-block;
    width: 148px;
    height: 148px;
    vertical-align: top;
    border-radius: 5px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tag-upload {
    display: inline-block;
  }
}
</style>
